<template>
  <el-container class="main_con">
    <div class="header">
      <div class="icon"><i class="el-sc-shezhi1"></i></div>
      <div class="txt">远程附件</div>
    </div>
    <div class="notice">
      <div class="panelCon">
        <div class="tips">
          前往
          <el-button type="text"><a target="_blank" href="https://www.aliyun.com/product/oss?spm=5176.10695662.5694434980.1.512730be7I8zFL">阿里云</a></el-button>
          ,
          <el-button type="text"><a target="_blank" href="https://cloud.tencent.com">腾讯云</a></el-button>
          ,获取配置参数
        </div>
        <div class="edit_con">
          <div class="edit_content">
            <el-form size="medium" label-width="100px" class="edit_form" ref="wxaForm" :model="obj.configuration" :rules="wxaRules">
              <el-form-item label="选用远程附件">
                <el-radio-group v-model="obj.configuration.oss_choice">
                  <el-radio :label="1">系统设置</el-radio>
                  <el-radio :label="0">单独设置</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="类型" v-if="obj.configuration.oss_choice == 0">
                <el-radio-group v-model="obj.configuration.is_open">
                  <!-- <el-radio :label="0">本地</el-radio> -->
                  <el-radio :label="1">阿里云</el-radio>
                  <el-radio :label="2">腾讯云</el-radio>
                </el-radio-group>
              </el-form-item>
              <template v-if="obj.configuration.oss_choice == 0">
                <template v-if="obj.configuration.is_open == 1">
                  <el-form-item label="key" style="color:#606266;" prop="ali.accessKeyId">
                    <el-input placeholder="key" v-model.trim="obj.configuration.ali.accessKeyId" style="width:360px;"></el-input>
                  </el-form-item>
                  <el-form-item label="Secret" style="color:#606266;" prop="ali.accessKeySecret">
                    <el-input placeholder="accessKeySecret" v-model.trim="obj.configuration.ali.accessKeySecret" style="width:360px;"></el-input>
                  </el-form-item>
                  <el-form-item label="阿里云区域" prop="ali.region">
                    <el-select v-model="obj.configuration.ali.region">
                      <el-option v-for="(item, i) in ali_citylist" :key="item.key" :label="item.value" :value="item.key"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="存储空间" prop="ali.bucket">
                    <el-input placeholder="" v-model.trim="obj.configuration.ali.bucket" style="width: 360px;"></el-input>
                  </el-form-item>
                  <el-form-item label="访问域名" prop="ali.endpoint">
                    <el-input placeholder="" v-model.trim="obj.configuration.ali.endpoint" style="width: 360px;"></el-input>
                    <div class="" style="color: red;">示例:https://xxxxxx</div>
                  </el-form-item>
                </template>
                <template v-if="obj.configuration.is_open == 2">
                  <el-form-item label="Secretid" style="color:#606266;" prop="qcloud.accessKeySecret">
                    <el-input placeholder="accessKeySecret" v-model.trim="obj.configuration.qcloud.accessKeySecret" style="width:360px;"></el-input>
                  </el-form-item>
                  <el-form-item label="key" style="color:#606266;" prop="qcloud.accessKeyId">
                    <el-input placeholder="key" v-model.trim="obj.configuration.qcloud.accessKeyId" style="width:360px;"></el-input>
                  </el-form-item>
                  <el-form-item label="腾讯云区域" prop="qcloud.region">
                    <el-select v-model="obj.configuration.qcloud.region">
                      <el-option v-for="(item, i) in citylist" :key="item.key" :label="item.value" :value="item.key"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="存储空间" prop="qcloud.bucket">
                    <el-input placeholder="" v-model.trim="obj.configuration.qcloud.bucket" style="width: 360px;"></el-input>
                    <div class="" style="color: red;">示例:xxxxxx-11500000</div>
                  </el-form-item>

                  <el-form-item label="访问域名" prop="qcloud.endpoint">
                    <el-input placeholder="" v-model.trim="obj.configuration.qcloud.endpoint" style="width: 360px;"></el-input>
                    <div class="" style="color: red;">示例:https://xxxxxx</div>
                  </el-form-item>
                </template>
              </template>

              <!--  <el-form-item label="开启状态">
                <el-radio-group v-model="obj.configuration.is_open">
                  <el-radio :label="1">开启</el-radio>
                  <el-radio :label="0">关闭</el-radio>
                </el-radio-group>
              </el-form-item> -->
            </el-form>
          </div>
          <div class="edit_footer"><el-button v-has size="medium" type="primary" @click="saveData">保存数据</el-button></div>
        </div>
      </div>
    </div>
  </el-container>
</template>

<script>
import {addSiteConfig, editSiteConfig, getSiteConfig} from '@/api/mall/setting';
import {mapState} from 'vuex';
export default {
  data() {
    return {
      isLoading: false,
      is_open: 0,
      obj: {
        type: 'oss',
        status: 1,
        configuration: {
          oss_choice: 1,
          ali: {
            is_open: 0,
            accessKeyId: '',
            accessKeySecret: '',
            endpoint: '',
            bucket: '',
            region: ''
          },
          qcloud: {
            is_open: 0,
            accessKeyId: '',
            accessKeySecret: '',
            endpoint: '',
            bucket: '',
            region: ''
          },
          local: {
            is_open: 0
          },
          is_open: 1
        }
      },
      citylist: [
        {
          key: 'ap-beijing-1',
          value: '北京一区'
        },
        {
          key: 'ap-beijing',
          value: '北京'
        },
        {
          key: 'ap-nanjing',
          value: '南京'
        },
        {
          key: 'ap-shanghai',
          value: '上海'
        },
        {
          key: 'ap-guangzhou',
          value: '广州'
        },
        {
          key: 'ap-chengdu',
          value: '成都'
        },
        {
          key: 'ap-chongqing',
          value: '重庆'
        },
        {
          key: 'ap-shenzhen-fsi',
          value: '深圳金融'
        },
        {
          key: 'ap-shanghai-fsi',
          value: '上海金融'
        },
        {
          key: 'ap-beijing-fsi',
          value: '北京金融'
        },
        {
          key: 'ap-hongkong',
          value: '中国香港'
        },

        {
          key: 'ap-singapore',
          value: '新加坡'
        },
        {
          key: 'ap-mumbai',
          value: '孟买'
        },
        {
          key: 'ap-jakarta',
          value: '雅加达'
        },
        {
          key: 'ap-seoul',
          value: '首尔'
        },
        {
          key: 'ap-bangkok',
          value: '曼谷'
        },
        {
          key: 'ap-tokyo',
          value: '东京'
        },
        {
          key: 'na-siliconvalley',
          value: '硅谷（美西）'
        },
        {
          key: 'na-ashburn',
          value: '弗吉尼亚（美东）'
        },
        {
          key: 'na-toronto',
          value: '多伦多'
        },
        {
          key: 'sa-saopaulo',
          value: '圣保罗'
        },
        {
          key: 'eu-frankfurt',
          value: '法兰克福'
        },
        {
          key: 'eu-moscow',
          value: '莫斯科'
        }
      ],
      ali_citylist: [
        {
          key: 'oss-cn-hangzhou',
          value: '华东1（杭州）'
        },
        {
          key: 'oss-cn-shanghai',
          value: '华东2（上海）'
        },
        {
          key: 'oss-cn-qingdao',
          value: '华北1（青岛）'
        },
        {
          key: 'oss-cn-beijing',
          value: '华北2（北京）'
        },
        {
          key: 'oss-cn-zhangjiakou',
          value: '华北 3（张家口）'
        },
        {
          key: 'oss-cn-huhehaote',
          value: '华北5（呼和浩特）'
        },
        {
          key: 'oss-cn-wulanchabu',
          value: '华北6（乌兰察布）'
        },

        {
          key: 'oss-cn-shenzhen',
          value: '华南1（深圳）'
        },
        {
          key: 'oss-cn-heyuan',
          value: '华南2（河源）'
        },
        {
          key: 'oss-cn-guangzhou',
          value: '华南3（广州）'
        },

        {
          key: 'oss-cn-chengdu',
          value: '西南1（成都）'
        },
        {
          key: 'oss-cn-hongkong',
          value: '中国（香港）'
        },
        {
          key: 'oss-us-west-1',
          value: '美国（硅谷）'
        },
        {
          key: 'oss-us-east-1',
          value: '美国（弗吉尼亚）'
        },
        {
          key: 'oss-ap-southeast-1',
          value: '新加坡'
        },
        {
          key: 'oss-ap-southeast-2',
          value: '澳大利亚（悉尼）'
        },
        {
          key: 'oss-ap-southeast-3',
          value: '马来西亚（吉隆坡）'
        },
        {
          key: 'oss-ap-southeast-5',
          value: '印度尼西亚（雅加达）'
        },
        {
          key: 'oss-ap-northeast-1',
          value: '日本（东京）'
        },
        {
          key: 'oss-ap-south-1',
          value: '印度（孟买）'
        },
        {
          key: 'oss-eu-central-1',
          value: '德国（法兰克福）'
        },
        {
          key: 'oss-eu-west-1',
          value: '英国（伦敦）'
        },
        {
          key: 'oss-me-east-1',
          value: '阿联酋（迪拜）'
        },
        {
          key: 'oss-ap-southeast-6',
          value: '菲律宾（马尼拉）'
        }
      ],
      wxaRules: {
        'ali.accessKeyId': [
          {
            required: true,
            message: '必须填写'
          }
        ],
        'ali.accessKeySecret': [
          {
            required: true,
            message: '必须填写'
          }
        ],
        'ali.bucket': [
          {
            required: true,
            message: '必须填写'
          }
        ],
        'ali.endpoint': [
          {
            required: true,
            message: '必须填写'
          }
        ],
        'ali.region': [
          {
            required: true,
            message: '必须选择',
            trigger: 'change'
          }
        ],
        'qcloud.accessKeyId': [
          {
            required: true,
            message: '必须填写'
          }
        ],
        'qcloud.accessKeySecret': [
          {
            required: true,
            message: '必须填写'
          }
        ],
        'qcloud.bucket': [
          {
            required: true,
            message: '必须填写'
          }
        ],
        'qcloud.endpoint': [
          {
            required: true,
            message: '必须填写'
          }
        ],
        'qcloud.region': [
          {
            required: true,
            message: '必须选择',
            trigger: 'change'
          }
        ]
      }
    };
  },
  components: {},
  created() {},
  mounted() {
    this.getConfig('oss');
  },
  methods: {
    //获取站点配置数据
    getConfig(type) {
      this.isLoading = true;
      getSiteConfig(type)
        .then(res => {
          this.isLoading = false;
          if (res.msg) {
            if (!res.msg.configuration.ali) {
              this.obj.update_time = res.msg.update_time;
              this.obj.configuration.oss_choice = res.msg.configuration.oss_choice;
              this.obj.configuration.ali = res.msg.configuration;
            } else {
              this.obj = res.msg;
            }
          }
        })
        .catch(e => {
          this.isLoading = false;
        });
    },
    //保存数据
    saveData() {
      this.$refs.wxaForm.validate(valid => {
        if (valid) {
          this.isLoading = true;

          if (this.obj.update_time) {
            //更新
            editSiteConfig(this.obj)
              .then(res => {
                this.isLoading = false;
                this.getConfig('oss');
                this.$store.dispatch('common/getpicgeturl');
              })
              .catch(e => {});
          } else {
            //新增
            addSiteConfig(this.obj)
              .then(res => {
                this.getConfig('oss');
                this.$store.dispatch('common/getpicgeturl');
              })
              .catch(e => {});
          }
        } else {
          //校验没通过
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
//覆盖样式
::v-deep .el-step__title {
  font-size: 14px;
}

.header {
  background: #dcdfe6;
  height: 70px;
  line-height: 70px;
  padding-left: 20px;
  display: flex;

  .icon {
    color: #2d8cf0;

    i {
      vertical-align: middle;
      font-size: 24px;
    }
  }

  .txt {
    margin-left: 10px;
    font-weight: bold;
    font-size: 24px;
    color: #2d8cf0;
  }
}

.notice {
  margin-top: 20px;
  padding-top: 10px;
  background: #fff;
}

.panelCon {
  width: 100%;
  padding: 5px 20px 20px;

  .tips {
    padding: 15px;
    color: #606266;
    font-size: 14px;
    line-height: 28px;
    border: 1px solid #abdcff;
    background-color: #f0faff;
  }

  > .title {
    background: #e0e3e8;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    margin-top: 20px;
  }

  .edit_con {
    .edit_content {
      .edit_form {
        width: 100%;

        .templateDemo {
          width: 100%;
          padding: 20px;
          background: #f4f6f8;

          .pic_area {
            width: 250px;
            min-height: 410px;
            background-size: 250px 410px;
            background-position: top left;
            position: relative;
            padding: 70px 10px 0;

            .wxd {
              position: absolute;
              left: -30px;
              top: 50px;
              // position: relative;
              width: 310px;
              padding: 18px 16px;
              background-color: #fff;
              font-size: 15px;
              color: #212121;
              border: 1px solid #e5e5e5;
              border-radius: 5px;
              -webkit-transform: scale(0.7);
              transform: scale(0.7);

              .template-title {
                margin-bottom: 20px;
                line-height: 20px;
                font-size: 14px;
                color: #969696;
              }

              .template-html {
                line-height: 20px;
                font-size: 14px;
                width: 100%;
                word-break: break-all;

                .flex {
                  width: 100%;
                  display: flex;
                  height: 20px;
                  margin-bottom: 10px;

                  .label {
                    flex-shrink: 0;
                    width: 80px;
                    color: #969696;
                  }

                  .txt {
                    height: 20px;
                    flex-grow: 1;
                    line-height: 20px;
                    margin-bottom: 27px;
                  }
                }
              }
            }

            .mpd {
              position: absolute;
              left: -51px;
              top: 14px;
              padding-right: 6px;
              width: 351px;
              background-color: #fff;
              border: 1px solid #e5e5e5;
              border-radius: 5px;
              overflow: hidden;
              -webkit-transform: scale(0.66);
              transform: scale(0.66);

              .title.flex {
                display: flex;
                padding: 0 20px 0 18px;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                height: 54px;
                background-color: #fff;
                border-bottom: 1px solid #e5e5e5;

                .logo {
                  display: flex;
                  -webkit-box-align: center;
                  -ms-flex-align: center;
                  align-items: center;
                  font-weight: 700;
                  font-size: 13px;
                  line-height: 18px;
                  color: #1a1a1a;

                  .logo-icon {
                    margin-right: 4px;
                    width: 27px;
                    height: 27px;
                    line-height: 25px;
                    border: 1px solid #e7e7e7;
                    font-size: 9px;
                    color: #367bf5;
                    text-align: center;
                    border-radius: 50%;
                    font-weight: 500;
                    -webkit-transform: scale(0.8);
                    transform: scale(0.8);
                  }
                }

                .dot {
                  height: 27px;
                  line-height: 27px;

                  span {
                    display: inline-block;
                    margin-left: 3px;
                    width: 5px;
                    height: 5px;
                    background-color: #c7c7cb;
                    border-radius: 50%;
                  }
                }
              }

              .content {
                padding-left: 18px;

                .template-title {
                  margin: 16px 0 34px;
                  line-height: 24px;
                  font-size: 17px;
                }

                .template-html {
                  line-height: 20px;
                  font-size: 14px;
                  word-break: break-all;

                  .flex {
                    display: flex;
                    height: 20px;
                    margin-bottom: 10px;
                  }

                  .label {
                    width: 83px;
                    color: #969696;
                  }

                  div:last-child {
                    margin-bottom: 27px;
                  }
                }
              }

              .template-link {
                padding-left: 18px;
                height: 44px;
                line-height: 44px;
                font-size: 16px;
                cursor: default;
                border-top: 1px solid #e5e5e5;
              }
            }

            .smsd {
              min-height: 300px;
              background: #fff;

              .sms-notice {
                position: absolute;
                left: -22px;
                top: 86px;
                padding: 5px 12px;
                width: 274px;
                font-size: 15px;
                background-color: #e9e9eb;
                border-radius: 16px;
                -webkit-transform: scale(0.66);
                transform: scale(0.66);

                .sms-icon-img {
                  position: absolute;
                  left: -15px;
                  bottom: 2px;
                  width: 34px;
                  height: 41px;
                }

                .message-content {
                  position: relative;
                  line-height: 22px;
                }
              }
            }
          }
        }
      }
    }
  }

  //上传代码操作步骤
  .steps {
    height: 100px;
    padding: 20px 100px 10px;
    font-size: 14px;
  }

  .access {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 364px);

    .abk {
      //width: 260px;
      font-size: 14px;

      .title {
        font-size: 18px;
        text-align: center;
        font-weight: 700;
      }

      .desc {
        text-align: center;
        margin: 10px 0;
      }

      .c0 {
        margin-top: 20px;
        width: 260px;
        height: 260px;
        position: relative;

        .icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);

          img {
            width: 100px;
            height: 100px;
          }
        }
      }

      .c1 {
        .qrcode {
          img {
            width: 260px;
            height: 260px;
          }
        }

        .txt {
          text-align: center;
        }
      }

      .c2 {
        margin-top: 20px;
      }

      .c3 {
        width: 360px;
        margin-top: 20px;
        text-align: center;

        .txt {
          margin-top: 30px;
          font-size: 16px;
        }
      }

      .btn {
        text-align: center;
        margin-top: 20px;
      }
    }
  }
}
</style>
